<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>克里斯笔记-搜索结果</title>
<link rel="shortcut icon" type="image/x-icon" href="${pageContext.request.contextPath}/image/favicon.ico" />
<script src="${pageContext.request.contextPath}/js/jquery-3.5.0.min.js"></script>
<style type="text/css">
	.headDiv
	{
		background-color:#ececec;
		position:fixed;
		top:0px;
		left:0px;
		right:0px
	}
	/*头部div的小图标样式*/
	.headDiv img
	{
		width:45px;
		height:45px;
		border-radius:25px;
		margin-top:5px;
		margin-bottom:5px;
		margin-left:1%;
		margin-right:14%
	}
	.headDiv a,.candidateDiv a
	{
		/*去掉a标签的下划线*/
		text-decoration:none
	}
	/*搜索框样式*/
	#searchInput
	{
		width:30%;
		height:40px;
		position:fixed;
		top:1%;
		left:20%;
		font-size:20px;
		border-radius:20px;
		padding-left:20px;
		padding-right:20px;
		outline:none
	}
	/*笔记div的样式*/
	.recordDiv
	{
		width:60%;
		height:150px;
		margin:10px;
		padding:10px;
		border:pink 2px solid;
		text-align:left
	}
	/*笔记div下笔记标题div的样式*/
	.recordTitleDiv 
	{
		width:100%;
		height:25px;
		background:#ececec
	}
	/*笔记div下笔记内容div的样式*/
	.recordContentDiv
	{
		width:100%;
		height:110px;
		overflow:hidden
	}
	/*笔记div下笔记内容div下图片的样式*/
	.recordContentDiv img
	{
		/*不显示图片*/
		display:none
	}
	/*搜索候选项div的样式*/
	.candidateDiv
	{
		width:30%;
		position:fixed;
		top:calc(1% + 45px);
		left:calc(20% + 20px);
		background:white;
		border: black 1px solid;
		border-top: none;
	}
	/*搜索候选项div里面的p标签的样式*/
	.candidateDiv p
	{
		margin:0px;
	}
	/*搜索候选项a标签的样式*/
	.candidateA
	{
		display:none;
	}
</style>
<script>
	//实时显示搜索候选项
	function getSearchCandidate()
	{
		//获取搜索范围
		var searchRange=$("[name='searchRange']").val();
		//若用户没有登陆，且搜索范围选择的是搜自己，则不提供搜索候选项
		if("${sessionScope.user.userName}"=="" && searchRange=="searchSelf") return;
		//获取输入框的值
		var word=$("#searchInput").val();
		//让搜索候选项a标签不显示，并且删掉innerHTML
		$(".candidateA").each(function()
		{
			$(this)[0].innerHTML="";
			$(this)[0].style.display="none";
		});
		//判断搜索框是否为空格的正则表达式
		var regex=/^[ ]+$/;
		//判断搜索框里是否为空，若为空，则不执行查询候选项操作
		if(word=="" || regex.test(word)) return;
		//创建数组存放相应搜索范围内的笔记所有标题
		var recordTitles=new Array();
		if(searchRange=="searchSelf")
		{
			<c:forEach var="recordTitle" items="${selfRecordTitles}">
				recordTitles.push("${recordTitle}");
			</c:forEach>
		}
		else if(searchRange=="searchCommunity")
		{
			<c:forEach var="recordTitle" items="${communityRecordTitles}">
				recordTitles.push("${recordTitle}");
			</c:forEach>
		}
		//创建数组存储搜索候选项
		var candidates=new Array();
		//根据搜索关键词获取搜索候选项并存入数组
		for(var i=0;i<recordTitles.length && candidates.length<10;i++) if(recordTitles[i].search(word)!=-1) candidates.push(recordTitles[i]);
		//让搜索候选项a标签显示，并且为innerHTML赋值
		for(var i=0;i<candidates.length;i++)
		{
			$(".candidateA")[i].innerHTML=candidates[i];
			$(".candidateA")[i].style.display="inline";
		}
	}
	//切换搜索范围并搜索
	function changeSearchRange(value)
	{
		//若没有更换搜索范围，则不进行操作
		if(value==$("[name='searchRange']").val()) return false;
		//更换搜索范围
		$("[name='searchRange']").val(value);
		//提交搜索
		$(".searchForm").submit();
		return false;
	}
	//自执行函数
	$(function()
	{
		//为搜索框的表单添加提交事件
		$(".searchForm").submit(function()
		{
			//判断搜索框是否为空，若为空，搜索框左右抖动
			var word=$("#searchInput").val();
			if(word=="")
			{
				searchInputShake();
				return false;
			}
		});
		//未选中的搜索范围图标特殊显示，降低不透明度
		$(".searchSelf")[0].style.opacity="0.2";
		$(".searchCommunity")[0].style.opacity="0.2";
		$(".${searchRange}")[0].style.opacity="1";
		//默认不显示正序笔记div
		$(".ascDiv")[0].style.display="none";
	});
	//通过搜索候选项搜索
	function searchCandidate(value)
	{
		//获取点击的搜索候选项的搜索关键词
		var word=$(".candidateA")[value].innerHTML;
		//给搜索框赋值
		$("#searchInput").val(word);
		//提交搜索
		$(".searchForm").submit();
		return false;
	}
	//切换显示笔记排序的div
	function changeSortDiv()
	{
		//获取选中的值
		var value=$(".selectState").val();
		console.log(value);
		//跟换显示的div
		$(".ascDiv")[0].style.display="none";
		$(".descDiv")[0].style.display="none";
		$("."+value)[0].style.display="";
	}
	//搜索框左右抖动
	function searchInputShake()
	{
		var searchInputStyle=$("#searchInput")[0].style;
		var arr=new Array("19.8","19.6","19.8","20","20.2","20.4","20.2","20");
		var i=0;
		setInterval(function()
		{
			if(i>arr.length*2-1) return;
			searchInputStyle.left=arr[i%arr.length]+"%";
			i++;
		},20);
	}
</script>
</head>
<body>
	<div class="headDiv">
		<!-- 头部div小图标 -->
		<a href="${pageContext.request.contextPath}/index" title="首页">
			<img src="${pageContext.request.contextPath}/image/home.jpg"/>
		</a>
		<a class="searchCommunity" href="" title="搜社区" onclick="return changeSearchRange('searchCommunity')">
			<img src="${pageContext.request.contextPath}/image/searchCommunity.jpg" align="right"/>
		</a>
		<a class="searchSelf" href="" title="搜自己" onclick="return changeSearchRange('searchSelf')">
			<img src="${pageContext.request.contextPath}/image/searchSelf.jpg" align="right"/>
		</a>
		<!-- 搜索框 -->
		<form action="${pageContext.request.contextPath}/search" class="searchForm">
			<input type="text" id="searchInput" name="searchWord" value="${searchWord}" onkeyup="getSearchCandidate()"/>
			<!-- 搜索范围 -->
			<input type="text" name="searchRange" value="${searchRange}" style="display:none"/>
			<input type="submit" style="display:none"/>
		</form>
	</div>
	<!-- 候选项div -->
	<div class="candidateDiv">
		<p><a href="" class="candidateA" onclick="return searchCandidate(0)"></a></p>
		<p><a href="" class="candidateA" onclick="return searchCandidate(1)"></a></p>
		<p><a href="" class="candidateA" onclick="return searchCandidate(2)"></a></p>
		<p><a href="" class="candidateA" onclick="return searchCandidate(3)"></a></p>
		<p><a href="" class="candidateA" onclick="return searchCandidate(4)"></a></p>
		<p><a href="" class="candidateA" onclick="return searchCandidate(5)"></a></p>
		<p><a href="" class="candidateA" onclick="return searchCandidate(6)"></a></p>
		<p><a href="" class="candidateA" onclick="return searchCandidate(7)"></a></p>
		<p><a href="" class="candidateA" onclick="return searchCandidate(8)"></a></p>
		<p><a href="" class="candidateA" onclick="return searchCandidate(9)"></a></p>
	</div>
	<br/><br/>
	<div>
		<!-- 若查询到了笔记，则显示共多少条笔记 -->
		<c:if test="${recordsNum!=0}">
			<p align="center" style="display:inline-block;margin-left:35%;margin-right:10%">克里斯笔记为您找到${recordsNum}个结果</p>
		</c:if>
		<!-- 若没有查询到笔记，则显示没有搜索到相关笔记 -->
		<c:if test="${recordsNum==0}">
			<p align="center" style="display:inline-block;margin-left:35%;margin-right:10%">克里斯笔记没有找到相关结果</p>
		</c:if>
		<!-- 排序方式下拉列表 -->
		<span>排序方式：</span>
		<select class="selectState" onchange="changeSortDiv();">
			<option value="descDiv">倒序</option>
			<option value="ascDiv">正序</option>
		</select>
		<!-- 查询结果div，默认倒序 -->
		<div align="center" class="descDiv" style="height:730px;overflow:auto">
			<c:forEach var="record" items="${recordsDesc}">
				<!-- 每个笔记的单独div -->
				<div class="recordDiv">
					<!-- 每个笔记的标题div -->
					<div class="recordTitleDiv">
						<a href="${pageContext.request.contextPath}/record/${record.recordId}" target="_blank">${record.recordTitle}</a>
					</div>
					<!-- 每个笔记的内容div -->
					<div class="recordContentDiv">
						${record.recordContent}
					</div>
					<span style="color:green">最后修改时间：${record.recordTime}</span>
				</div>
			</c:forEach>
		</div>
		<!-- 查询结果div，正序 -->
		<div align="center" class="ascDiv" style="height:730px;overflow:auto">
			<c:forEach var="record" items="${records}">
				<!-- 每个笔记的单独div -->
				<div class="recordDiv">
					<!-- 每个笔记的标题div -->
					<div class="recordTitleDiv">
						<a href="${pageContext.request.contextPath}/record/${record.recordId}" target="_blank">${record.recordTitle}</a>
					</div>
					<!-- 每个笔记的内容div -->
					<div class="recordContentDiv">
						${record.recordContent}
					</div>
					<span style="color:green">最后修改时间：${record.recordTime}</span>
				</div>
			</c:forEach>
		</div>
	</div>
</body>
</html>